<template>
    <div class="Child">
        <h1>子组件</h1>
        <p>查询父组件资产:{{ money }}</p>
        <p>子资产:{{ monyChild }}</p>
        <button @click="getMoneyChild(a)">给父钱</button>
    </div>
    </template>
    
    <script lang="ts">
    export default {
    name:'Child'
    }
    </script>
    
    <script setup lang="ts">
    import { inject, onMounted, onUnmounted, provide, ref, toRef } from 'vue';

    
    //子的钱
    let monyChild = ref(300)
    let syncMoneyChild:any = inject('syncMoneyChild', 'unknow')
    onMounted(() => { 
        console.log('挂载');
        syncMoneyChild(monyChild)
    })


    //包装monyChild以免地址被改变失去响应式
    let a = { monyChild: monyChild }
    //查询父亲的资产
    let money = inject('money')
    //给父亲钱的方法
    let getMoneyChild:any = inject('getMoneyChild', 'unknow')

    
    </script>
    
    <style lang="css">
    .Child{
        margin: 20px;
        height: 200px;
        width: 400px;
        background-color:bisque;
    }
    </style>